<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-calendar"></i> 模组上传
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="form-box">
                <el-form ref="form" :model="form" >
                    <el-form-item label="模组名称">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="模组标签">
                        <el-select v-model="form.label" multiple placeholder="请选择" size="medium">
                            <div v-for="item in labels">
                                <el-tooltip class="item" effect="dark" :content="item.desc" placement="right">
                                    <el-option
                                        :key="item.name"
                                        :label="item.name"
                                        :value="item.labelId">
                                    </el-option>
                                </el-tooltip>
                            </div>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="模组类型">
                        <el-input v-model="form.type"></el-input>
                    </el-form-item>
                    <el-form-item label="规则类型">
                        <el-input v-model="form.rule_type"></el-input>
                    </el-form-item>
                    <el-form-item label="模组适合人数">
                        <el-input v-model="form.recommend_people"></el-input>
                    </el-form-item>
                    <el-form-item label="模组简介">
                        <el-input type="textarea" v-model="form.descri" autosize="{ minRows: 5, maxRows: 10}"></el-input>
                    </el-form-item>
                </el-form>
                <el-form inline="true" label-position='left' class="demo-form-inline">
                    <el-form-item label="最短时间">
                        <el-input v-model="form.short_time"></el-input>
                    </el-form-item>
                    <el-form-item label="最长时间">
                        <el-input v-model="form.long_time"></el-input>
                    </el-form-item>
                </el-form>
                <el-form ref="form" :model="form" >
                    <el-form-item label="背景时间">
                        <el-input v-model="form.time_background"></el-input>
                    </el-form-item>
                    <el-form-item label="背景地点">
                        <el-input v-model="form.place_background"></el-input>
                    </el-form-item>
                    <el-form-item label="上传文件(限一个)">
                        <div title="上传"style="padding:0;" @close="resetAdd">
                            <div style="height:70px;margin-left:100px;margin-top:15px;">
                                <input type="file" ref="clearFile" @change="getFile($event)" style="margin-left:70px;"
                                       accept=".zip,.rar">
                                <span>支持扩展名：.zip,.rar</span>
                            </div>
                        </div>
                        <div>
                            <div v-for="(item, index) in fileList" :key="index">
                                <div>{{ item.name }}</div>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item label="上传图片(限一张)">
                        <div title="上传" style="padding:0;" @close="resetAdd">
                            <div style="height:70px;margin-left:100px;margin-top:15px;">
                                <input type="file" ref="clearFile" @change="getPic($event)" style="margin-left:70px;"
                                       accept=".jpg,.png">
                                <span>支持扩展名：.jpg,.png</span>
                            </div>
                        </div>
                        <div>
                            <div v-for="(item, index) in picList" :key="index">
                                <div>{{ item.name }}</div>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">上传模组</el-button>
                        <el-button @click="resetAdd" type="danger">删除上传文件及图片</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'

export default {
    name: 'baseform',
    data() {
        return {
            form: {
                name: '',
                type: '',
                descri: '',
                label: [],
                uid: 0,
                short_time: '',
                long_time: '',
                rule_type: '',
                time_background: '',
                place_background: '',
                recommend_people: '',
                pic_path: '../assets/5.jpg',
                timePublish: '',
            },
            labels: [
                {
                    name: '测试标签',
                    desc: '这就是个测试标签',
                    labelId: 1,
                },
                {
                    name: '测试标签2',
                    desc: '这就是个测试标签2',
                    labelId: 2,
                },
                {
                    name: '测试标签3',
                    desc: '这就是个测试标签3',
                    labelId: 3,
                },
                {
                    name: '测试标签4',
                    desc: '这就是个测试标签4',
                    labelId: 4,
                }
            ],
            createForm: {
                title: "",
                content: "",
                img: "",
                user_id: "",
                type: "发布模组"
            },
            dialogVisible: false,
            dialogImageUrl: "",
            fileList: [],
            picList: [],
        }
    },
    methods: {
        getFile(event) {
            let file = event.target.files;
            console.log(file.length)
            for (let i = 0; i < file.length; i++) {
                //    上传类型判断
                let imgName = file[i].name;
                let idx = imgName.lastIndexOf(".");
                if (idx !== -1) {
                    let ext = imgName.substr(idx + 1).toUpperCase();
                    ext = ext.toLowerCase();
                    if (ext !== 'zip' && ext !== 'rar') {
                        this.$message.error("文件格式错误")
                    } else {
                        this.fileList=[];
                        this.fileList.push(file[i]);
                    }
                } else {

                }
            }
        },
        getPic(event) {
            let file = event.target.files;
            console.log(file.length)
            for (let i = 0; i < file.length; i++) {
                //    上传类型判断
                let imgName = file[i].name;
                let idx = imgName.lastIndexOf(".");
                if (idx !== -1) {
                    let ext = imgName.substr(idx + 1).toUpperCase();
                    ext = ext.toLowerCase();
                    if (ext !== 'jpg' && ext !== 'png') {
                        this.$message.error("文件格式错误")
                    } else {
                        if(ext === 'jpg'){
                            // file[i].name =
                        }
                        this.picList=[];
                        this.picList.push(file[i]);
                    }
                } else {

                }
            }
        },
        onSubmit() {
            // if (0 === this.fileList.length) {
            //   this.$message({
            //     type: 'info',
            //     message: '请选择要上传的文件'
            //   });
            //   return;
            // }
            console.log(this.form.label)

            //上传文件
            let formData = new FormData();
            console.log("files length" + this.fileList.length);
            for (let i = 0; i < this.fileList.length; i++) {
                formData.append('file', this.fileList[i]);
            }
            //上传图片
            // let formDataPic = new FormData();
            console.log("files length" + this.picList.length);
            for (let i = 0; i < this.picList.length; i++) {
                formData.append('pic', this.picList[i]);
            }

            formData.append("name",this.form.name)
            formData.append("type",this.form.type)
            formData.append("descri",this.form.descri)
            formData.append("uid",this.form.uid)
            formData.append("short_time",this.form.short_time)
            formData.append("label",this.form.label)
            formData.append("long_time",this.form.long_time)
            formData.append("rule_type",this.form.rule_type)
            formData.append("time_background",this.form.time_background)
            formData.append("place_background",this.form.place_background)
            formData.append("recommend_people",this.form.recommend_people)
            formData.append("pic_path",this.form.pic_path)
            formData.append("timePublish",this.form.timePublish)

            // this.form.pic=formDataPic;
            // this.form.file=formData;
            // let upload_file=this.form;

            // let data_form=new FormData();
            // data_form.append('pic', this.picList[0]);
            // data_form.append('file', this.fileList[0]);

            axios.post(
                axios.defaults.baseURL + 'module/upload',
                formData
            ).then((res) => {
                if(res.data.code==="000000"){
                    this.$message.success("上传成功");
                }else{
                    this.$message.error(res.data.desc)
                }
            })

        },
        resetAdd() {
            this.fileList=[];
            this.picList=[];
        }
    },
    created() {
        this.form.uid = localStorage.getItem('uid');
        let nowDate = new Date()
        let date = {
            year: nowDate.getFullYear(),
            month: nowDate.getMonth() + 1,
            date: nowDate.getDate()
        }
        this.form.timePublish = date.year + '-' + date.month + '-' + date.date
    }
};
</script>

<style>
.message-title{
    cursor: pointer;
}
.handle-row{
    margin-top: 30px;
}
</style>

